<template>
  <dl>
    <dt>{{ $t('pageOverview.firmwareInformation') }}</dt>
    <dd></dd>
    <dt v-if="BMCVersion">{{ $t('pageOverview.BMCVersion') }}：</dt>
    <dd v-if="BMCVersion">{{ BMCVersion ? BMCVersion : '--' }}</dd>
    <dt v-if="hostVersion">{{ $t('pageOverview.hostVersion') }}：</dt>
    <dd v-if="hostVersion">{{ hostVersion ? hostVersion : '--' }}</dd>
    <dt v-if="PBFVersion">{{ $t('pageOverview.PBFVersion') }}：</dt>
    <dd v-if="PBFVersion">{{ PBFVersion ? PBFVersion : '--' }}</dd>
    <dt v-if="cpldVersion">{{ $t('pageOverview.cpldVersion') }}：</dt>
    <dd v-if="cpldVersion">{{ cpldVersion ? cpldVersion : '--' }}</dd>
  </dl>
</template>

<script setup lang="ts">
import { useFirmwareStore } from '@/store/Settings/FirmwareStore';

const activeBmcFirmware = computed(() => firmwareStore.activeBmcFirmware);

const BMCVersion = computed(() => activeBmcFirmware.value?.version);

const activeCpldFirmware = computed(() => firmwareStore.activeCpldFirmware);

const cpldVersion = computed(() => activeCpldFirmware.value?.version);

const hostFirmware = computed(() => firmwareStore.activeHostFirmware);

const hostVersion = computed(() => hostFirmware.value?.version);

const PBFVersion = computed(() => firmwareStore.activeHostPbfFirmware);

const firmwareStore = useFirmwareStore();

onMounted(() => {
  firmwareStore.getFirmwareInformation();
});
</script>

<style lang="scss" scoped>
dl > dt:first-child {
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 20px;
}
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
  column-gap: 10px;
}
</style>
